<template>
  <el-calendar v-model="value">
    <template slot="dateCell" slot-scope="{ date, data }">
      <div class="main-cd" @click="addPlan()">
        <div class="calendar-day">
          {{ data.day.split("-").slice(2).join("-") }}
        </div>
        <div
            v-for="(item, index) in calendarData"
            :key="index"
            class="is-selected"
            @click.stop="addPlan(item)"
            `
        >
                <span v-if="item.day == data.day && item.timeDetailsList">
                  <el-tooltip placement="top">
                    <div slot="content">
                      <div
                          v-for="items in item.timeDetailsList"
                          :key="items.day"
                      >a
                        {{ items.channelName }} :
                        {{ items.wechatNumber }}个微信号，
                        计划投放{{ items.planNumber }}，
                        实际加人
                        {{ items.realityNumber }}
                      </div>
                    </div>
                    // 这里写两遍是因为一个是框里展示，一个是悬浮组件内展示的内容
                    <div v-for="items in item.timeDetailsList" :key="items.day">
                      {{ items.channelName }} :
                      {{ items.wechatNumber }}个微信号，
                      计划投放{{ items.planNumber }}，
                      实际加人
                      {{ items.realityNumber }}
                    </div>
                  </el-tooltip>
                </span>
        </div>
      </div>
    </template>
  </el-calendar>

</template>

<script>
export default {
  name: "calendar",
  methods:{
    monthChange(val) {
      // 这里是监听时间变化 => @change="monthChange"，然后传入日历组件
      this.value = val;
      // 时间切换的时候，顺便调个接口查询当月数据
      this.editDetail();
    },
  }
}
</script>

<style scoped>
::v-deep .el-calendar-table:not(.is-range) td.next {
  display: none;
}

::v-deep .el-calendar-table:not(.is-range) td.prev {
  visibility: hidden;
}
::v-deep .el-calendar__button-group {
  display: none;
}
</style>